.classify{
  height: 80px;
  line-height: 80px;
  margin: auto;
}
.classify-list{
  margin-top: 30px;
  margin-bottom: 60px;
}
.classify-name,.classify-item{
  float:left;
}
.classify-name{
  margin: 0 12px;
}
.classify-name .active{
  margin: 0 12px;
  color: #31c27c;
}
.classify .active{
  color: #31c27c;
}
.classify-item{
  width: 300px;
  height: 320px;
  margin-right: 15px;
}
.classify-item:nth-child(5n){
  margin-right: 0;
}
.classify-item img{
  height: 190px;
}
.classify-item-n{
  margin-top: 12px;
}
.classify-item-num{
  color: #888;
  margin-top: 12px;
}

.icons {
  display: flex;
  justify-content: space-between;
  padding: 10px 60px;
  margin-left: 118px;
  box-sizing: border-box;
  overflow: hidden;
}

.icons_items {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  margin-left: 15px;
  margin-right: 35px;
  width: 400px;
  height: 420px;
}

/* .icons_items_imgs {
  border-radius: 10%;
  width: 300px;
  height: 320px;
  margin-bottom: 30px;
} */

.box{
  position: relative;
  width: 300px;
  height: 320px;
}
.box a:hover::before{
  display: block;
}
.box img{
  width: 100%;
  height: 100%;
  border-radius: 10%;
}
/* 添加伪元素 */
.box a::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4) url(../image/暂停符.png) no-repeat center;
  background-size: 80px;
  display: none;
  border-radius: 10%;
}
.page{
  width: 760px;
  margin: auto;
}
.page-item{
  width: 50px;
  height: 50px;
  line-height: 50px;
  float: left;
  text-align: center;
  border-radius: 100%
}
.page-item:hover{
  background: #31c27c;
  color: #fff;
}
.page .active{
  background: #31c27c;
  color: #fff;
}
.up,.down{
  width: 80px;
  background: #eee;
  margin: 0 10px;
}
a:hover{
  color: #31c27c;
}
